import React from 'react';
import type { ErrorFallbackProps } from '../../types';

/**
 * 默认错误回退UI组件
 *
 * 功能特性：
 * - 提供友好的错误显示界面
 * - 支持重试操作
 * - 支持错误重置
 * - 显示错误详情（开发环境）
 */
const ErrorFallback: React.FC<ErrorFallbackProps> = ({
  error,
  resetError,
  retry,
}) => {
  const isDevelopment = process.env.NODE_ENV === 'development';

  const containerStyle: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '40px 20px',
    textAlign: 'center',
    backgroundColor: '#fff',
    border: '1px solid #f0f0f0',
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
    margin: '20px',
    minHeight: '200px',
  };

  const iconStyle: React.CSSProperties = {
    fontSize: '48px',
    color: '#ff4d4f',
    marginBottom: '16px',
  };

  const titleStyle: React.CSSProperties = {
    fontSize: '18px',
    fontWeight: '600',
    color: '#262626',
    marginBottom: '8px',
  };

  const messageStyle: React.CSSProperties = {
    fontSize: '14px',
    color: '#8c8c8c',
    marginBottom: '24px',
    lineHeight: '1.5',
  };

  const buttonGroupStyle: React.CSSProperties = {
    display: 'flex',
    gap: '12px',
    marginBottom: isDevelopment ? '24px' : '0',
  };

  const buttonStyle: React.CSSProperties = {
    padding: '8px 16px',
    fontSize: '14px',
    border: 'none',
    borderRadius: '6px',
    cursor: 'pointer',
    transition: 'all 0.3s',
  };

  const primaryButtonStyle: React.CSSProperties = {
    ...buttonStyle,
    backgroundColor: '#1890ff',
    color: '#fff',
  };

  const secondaryButtonStyle: React.CSSProperties = {
    ...buttonStyle,
    backgroundColor: '#f5f5f5',
    color: '#595959',
  };

  const errorDetailStyle: React.CSSProperties = {
    marginTop: '16px',
    padding: '16px',
    backgroundColor: '#fafafa',
    border: '1px solid #e8e8e8',
    borderRadius: '4px',
    fontSize: '12px',
    color: '#595959',
    textAlign: 'left',
    width: '100%',
    maxWidth: '500px',
    overflow: 'auto',
    maxHeight: '200px',
  };

  return (
    <div style={containerStyle}>
      {/* 错误图标 */}
      <div style={iconStyle}>⚠️</div>

      {/* 标题 */}
      <h3 style={titleStyle}>应用加载失败</h3>

      {/* 描述 */}
      <p style={messageStyle}>
        微应用运行时发生错误，请尝试重新加载或联系系统管理员
      </p>

      {/* 操作按钮 */}
      <div style={buttonGroupStyle}>
        <button
          type="button"
          style={primaryButtonStyle}
          onClick={retry}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#40a9ff';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = '#1890ff';
          }}
        >
          重新加载
        </button>

        <button
          type="button"
          style={secondaryButtonStyle}
          onClick={resetError}
          onMouseOver={(e) => {
            e.currentTarget.style.backgroundColor = '#e6e6e6';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.backgroundColor = '#f5f5f5';
          }}
        >
          重置错误
        </button>
      </div>

      {/* 开发环境下显示错误详情 */}
      {isDevelopment && (
        <details style={errorDetailStyle}>
          <summary style={{ cursor: 'pointer', marginBottom: '8px' }}>
            错误详情
          </summary>
          <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
            {error.name}: {error.message}
            {error.stack && `\n\n${error.stack}`}
          </pre>
        </details>
      )}
    </div>
  );
};

export default ErrorFallback;
